<template>
    <div class="app">
        <div class="nav"><ManageNavict /></div>
        <div style="width: 90%;margin-left: 20px;">
          <div style="height: 50px;font-size: 25px;line-height: 50px;margin-top: 20px;margin-bottom: 20px;">
            领养申请
          </div>
          <div class="bot">
              <div>
                  <el-table :data="myStore.app_lis"  border
                      :height="myStore.app_lis.length > 11?600:auto"
                      style="width: 99.97%;--el-table-border-color: none;border-right: #03a850 solid;border-left: 1px #03a850 solid;border-bottom: 1px #03a850 solid;"
                      :highlight-current-row="false"
                      :header-cell-style="{ backgroundColor: '#03ab50', color: 'black', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px black solid', borderBottom: '1px black solid' }"
                      :cell-style="{ color: 'black', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #03a850 solid', borderLeft: '0.5px #03a850 solid' }"
                      :row-style="{ color: 'black', fontSize: '14px', textAlign: 'center', }"
                  >
                      <el-table-column fixed prop="data" label="Date"  />
                      <el-table-column prop="name" label="用户名"  />
                      <el-table-column prop="email" label="邮箱"  />
                      <el-table-column prop="pet_name" label="宠物编号"  />
                      <!-- <el-table-column prop="pet_img" label="图片"  /> -->
                      <el-table-column fixed="right" label="操作" >
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleClick(scope.row)"
                            >同意</el-button
                            >
                            <el-button link type="primary" size="small" @click="resufe(scope.row)">拒绝</el-button>
                        </template>
                      </el-table-column>
                  </el-table>
              </div>
          </div>
        </div>
    </div>
</template>

<script setup>
import ManageNavict from './ManageNavict.vue'
import { useStore } from '@/stores/counter';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted } from 'vue';

const myStore =  useStore()

// 定义触发操作的方法，在组件挂载后执行
const fetchData = async (url) => {
  try {
    // 发起请求
    const response = await axios.get(url)

    // 更新数据到 Pinia Store
    myStore.setapp(response.data.history_list)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

// 在组件挂载后执行 fetchData 方法
onMounted(() => {
  fetchData('http://localhost:8000/manage/pet_app')
})


const handleClick = (row) => {
  const storedData = sessionStorage.getItem('manage_token');
  const t = JSON.parse(storedData)
  if(t !== null){
    axios.post("http://localhost:8000/manage/cross",{
      pet_id:row.pet_id
    },{
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
      }
    }).then((res) => {
      if(res.data.code === 200){
        fetchData('http://localhost:8000/manage/pet_app')
        ElMessage({
          message:res.data.result,
          type:"success"
        })
      }else{
        ElMessage({
          message:res.data.result,
          type:"error"
        })
      }
    })
  }else{
    ElMessage({
      message:"你看起来还没登录，请登录！",
      type:"error"
    })
  }
}

const resufe = (row) =>{
  const storedData = sessionStorage.getItem('manage_token');
  const t = JSON.parse(storedData)
  if(t !== null){
    axios.post("http://localhost:8000/manage/pet_refuse",{
      pet_id:row.pet_id
    },{
        headers:{
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
        }
    }).then((res) => {
        if(res.data.code === "200"){
          fetchData('http://localhost:8000/manage/pet_app')
          ElMessage({
            message:res.data.infos,
            type:"success"
          })
        }else{
          ElMessage({
            message:res.data.infos,
            type:"error"
          })
        }
    })
  }else{
    ElMessage({
      message:"你看起来还没登录，请登录！",
      type:"error"
    })
  }

}

</script>

<style scoped>
    .app{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left:0;
        color: black;
        display: flex;
        justify-content: start;
    }
    .nav{
        height: 200px;
    }
    .bot{
        width: 98%;
        height: auto;
        margin:0 auto;
    }
    
    ::v-deep .el-radio-button :hover{
        color: #03a850;
        
    }
    ::v-deep .el-radio-button {
        /* width: 120px; */
        border: #03a850 1px solid;
        border-radius: 2px;
        margin-left: 20px;
        background-color: #edf3d1;
    }
</style>